<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI智能备忘录</title>
    <!-- 加载静态CSS（对应static/css/style.css） -->
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
<div class="container">
    <!-- 页面标题 -->
    <h1>AI智能备忘录</h1>

    <!-- 1. 任务添加表单 -->
    <div class="add-task">
        <h3>添加新任务</h3>
        <form id="taskForm">
            <div class="form-item">
                <label>任务标题：</label>
                <input type="text" name="title" required placeholder="例如：完成Go项目报告">
            </div>
            <div class="form-item">
                <label>任务详情：</label>
                <textarea name="content" rows="3" placeholder="例如：包含需求分析、代码说明、测试报告"></textarea>
            </div>
            <div class="form-item">
                <label>截止时间：</label>
                <input type="datetime-local" name="due_time" required>
            </div>
            <button type="submit" id="submitBtn">添加任务（AI自动规划）</button>
            <!-- AI加载状态（默认隐藏） -->
            <span id="loading" style="display: none; margin-left: 10px; color: #666;">AI正在生成规划...（约3秒）</span>
        </form>
    </div>

    <!-- 2. 任务列表（后端传递的tasks数据会渲染这里） -->
    <div class="task-list">
        <h3>我的任务</h3>
        {{if len .tasks}}
        <ul>
            {{range .tasks}}
            <li class="task-item">
                <!-- 任务标题+状态选择器 -->
                <div class="task-header">
                    <h4>{{.Title}}</h4>
                    <select class="status-select" data-id="{{.ID}}">
                        <option value="pending" {{if eq .Status "pending"}}selected{{end}}>待执行</option>
                        <option value="doing" {{if eq .Status "doing"}}selected{{end}}>执行中</option>
                        <option value="done" {{if eq .Status "done"}}selected{{end}}>已完成</option>
                    </select>
                </div>
                <!-- 任务基础信息 -->
                <div class="task-info">
                    <p><span>详情：</span>{{if .Content}}{{.Content}}{{else}}无详情{{end}}</p>
                    <p><span>截止时间：</span>{{.DueTime.Format "2006-01-02 15:04"}}</p>
                    <p><span>创建时间：</span>{{.CreatedAt.Format "2006-01-02 15:04"}}</p>
                </div>
                <!-- AI生成的规划和建议 -->
                <div class="ai-content">
                    <p><span>AI规划：</span>{{.AIPlan}}</p>
                    <p><span>AI建议：</span>{{.AIAdvice}}</p>
                </div>
            </li>
            {{end}}
        </ul>
        {{else}}
        <!-- 无任务时显示 -->
        <p class="empty">暂无任务，点击“添加新任务”开始吧！</p>
        {{end}}
    </div>
</div>

<!-- 加载静态JS（对应static/js/main.js） -->
<script src="/static/js/main.js"></script>
</body>
</html>